<template>
  <el-row
    :gutter="20"
    justify="space-between"
  >
    <!-- 左table -->
    <el-col :lg="12">
      <DataTable
        :data="tableData"
        :columns="[
          { label: '日期', slot: 'date' },
          { label: '姓名', slot: 'name' },
          { label: '手机号', prop: 'mobile' },
          {
            label: '备注', prop: 'address'

          }
        ]"
      >
        <template #date="{ item }">
          <icon icon="User" />
          <span>{{ item.date }}</span>
        </template>
        <template #name="{ item }">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
          >
            <template #default>
              <p>姓名: {{ item.name }}</p>
              <p>住址: {{ item.address }}</p>
            </template>
            <template #reference>
              <div class="name-wrapper">
                <el-tag size="small">{{ item.name }}</el-tag>
              </div>
            </template>
          </el-popover>
        </template>
      </DataTable>
    </el-col>
    <!-- 右table -->
    <el-col :lg="12">
      <DataTable
        :data="sourceData"
        :columns="[
          { label: '头像', slot: 'avatar' },
          { label: '姓名', prop: 'name' },
          { label: '地址', prop: 'address' },
        ]"
      >
        <template #avatar="{ item }">
          <el-avatar
            :src="item.avatar"
            :size="38"
            class="avatar"
          />
        </template>
      </DataTable>
    </el-col>
  </el-row>
</template>

<script setup>
import DataTable from '@/components/table'

const avatarURL = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const tableData = [
  { date: '2016-05-03', name: 'Tom', address: '中国加油！祖国必胜' },
  { date: '2016-05-02', name: 'Tom', address: '中国加油！祖国必胜' },
  { date: '2016-05-04', name: 'Tom', address: '中国加油！祖国必胜' },
  { date: '2016-05-01', name: 'Tom', address: '中国加油！祖国必胜' },
].map((item) => ({ ...item, mobile: `${Date.now()}`.slice(0, 10) }))
const sourceData = [
  { date: '2016-05-03', name: 'Tom', address: 'Angeles' },
  { date: '2016-05-02', name: 'jie', address: 'Angeles' },
  { date: '2016-05-04', name: 'Tom', address: 'Angeles' },
].map((item) => ({ ...item, avatar: avatarURL }))
</script>